<template>
  <div class="height-full">
    <div class="tea-desc pt5 back-white">
      <div class="list-caption ml10 f18">主题效果评估</div>

      <h2 class="list-caption text-center f18 ellipsis" :title="manuInfo.themeName">
        {{ manuInfo.themeName }}
      </h2>

      <div class="manu-info f12 text-center mt20">
        <span>创建时间：{{ manuInfo.createTime | dateFormat('YYYY年MM月DD日 HH:mm:ss') }}</span>
      </div>

      <div class="mr24 ml26 mt10 text-indent2 f14 three-ellipsis" :title="manuInfo.summary">
        概述：{{ manuInfo.summary }}
      </div>
    </div>

    <div class="mt12 tea-content back-white">
      <div class="d-flex">
        <div class="data-stat-wrapper">
          <div class="title-line list-caption">池内数据总量统计</div>
          <div class="mt8 d-flex flex-wrap flex-ju-sa pt14 pb14 tea-border">
            <DataStatItem v-for="(it, i) of entryDataCountStat" :key="i" :item="it"></DataStatItem>
          </div>
        </div>

        <div class="data-stat-wrapper">
          <div class="title-line list-caption pl14">全平台数据总量统计</div>
          <div class="mt8 d-flex flex-wrap flex-wrap flex-ju-sa pt14 pb14 tea-border">
            <DataStatItem v-for="(it, i) of allPlatformDataCountStat" :key="i" :item="it"></DataStatItem>
          </div>
        </div>
      </div>

      <div class="mt22">
        <div class="title-line list-caption relative">
          主题传播效果指数
          <Icon
            class="bold f20 pointer"
            title="指数计算方法说明(点击查看)"
            type="ios-help-circle-outline"
            @click="visible.spreadEffectIndex = true"
          />

          <div class="right-oper fw-normal">
            <Select
              v-model="spreadEffectIndex_form.timeType"
              clearable
              style="width: 120px"
              @on-change="handleTimeTypeChange_spreadEffectIndex"
            >
              <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
            </Select>
            <DatePicker
              v-show="spreadEffectIndex_form.timeType === '自定义'"
              type="daterange"
              placeholder="请选择时间范围"
              style="width: 210px"
              transfer
              @on-change="handleTimeRange_spreadEffectIndex"
            ></DatePicker>
          </div>
        </div>
        <div class="chart-box mt12 tea-border">
          <CustomChart ref="spreadEffectIndex" :is-show="show.spreadEffectIndex"></CustomChart>
        </div>
      </div>

      <div class="mt20 d-flex">
        <div class="data-stat-wrapper">
          <div class="title-line list-caption relative">
            平台贡献率top5
            <div class="right-oper fw-normal">
              <Select
                v-model="platformContribute_form.timeType"
                clearable
                style="width: 120px"
                @on-change="handleTimeTypeChange_platformContribute"
              >
                <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
              </Select>
              <DatePicker
                v-show="platformContribute_form.timeType === '自定义'"
                type="daterange"
                placeholder="请选择时间范围"
                style="width: 210px"
                transfer
                @on-change="handleTimeRange_platformContribute"
              ></DatePicker>
            </div>
          </div>
          <div class="chart-box mt12 tea-border">
            <CustomChart ref="platformContribute" :is-show="show.platformContribute"></CustomChart>
          </div>
        </div>

        <div class="data-stat-wrapper">
          <div class="title-line list-caption relative">
            账号贡献率top5
            <div class="right-oper fw-normal">
              <Select
                v-model="accountContribute_form.timeType"
                clearable
                style="width: 120px"
                @on-change="handleTimeTypeChange_accountContribute"
              >
                <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
              </Select>
              <DatePicker
                v-show="accountContribute_form.timeType === '自定义'"
                type="daterange"
                placeholder="请选择时间范围"
                style="width: 210px"
                transfer
                @on-change="handleTimeRange_accountContribute"
              ></DatePicker>
            </div>
          </div>
          <div class="chart-box mt12 tea-border">
            <CustomChart ref="accountContribute" :is-show="show.accountContribute"></CustomChart>
          </div>
        </div>
      </div>

      <div class="mt20">
        <div class="title-line list-caption relative">
          传播趋势
          <div class="right-oper fw-normal">
            <Select
              v-model="spreadTrend_form.timeType"
              clearable
              style="width: 120px"
              @on-change="handleTimeTypeChange_spreadTrend"
            >
              <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
            </Select>
            <DatePicker
              v-show="spreadTrend_form.timeType === '自定义'"
              type="daterange"
              placeholder="请选择时间范围"
              style="width: 210px"
              transfer
              @on-change="handleTimeRange_spreadTrend"
            ></DatePicker>
          </div>
        </div>
        <div class="chart-box mt12 tea-border">
          <CustomChart ref="spreadTrend" :is-show="show.spreadTrend"></CustomChart>
        </div>
      </div>

      <div class="mt20">
        <div class="title-line list-caption relative">
          热点报道地域分布
          <div class="right-oper fw-normal">
            <Select
              v-model="hotReportArea_form.timeType"
              clearable
              style="width: 120px"
              @on-change="handleTimeTypeChange_hotReportArea"
            >
              <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
            </Select>
            <DatePicker
              v-show="hotReportArea_form.timeType === '自定义'"
              type="daterange"
              placeholder="请选择时间范围"
              style="width: 210px"
              transfer
              @on-change="handleTimeRange_hotReportArea"
            ></DatePicker>
          </div>
        </div>
        <div class="chart-box d-flex chart-box--report mt12 tea-border pt20" style="height: 640px">
          <CustomChart style="width: 60%" ref="hotReportArea" :is-show="show.hotReportArea"></CustomChart>
          <CommonTablePage
            style="width: 38%"
            class="ml14 relative"
            :columns="hotReportArea.columns"
            :tableData="hotReportArea.tableData"
            :total="hotReportArea.page.total"
            @on-change="handlePageChange_hotReport"
            @on-page-size-change="handlePageSizeChange_hotReport"
          ></CommonTablePage>
        </div>
      </div>

      <div style="height: 40px"></div>
    </div>

    <ModalSpreadEffectIndex :visible.sync="visible.spreadEffectIndex"></ModalSpreadEffectIndex>
  </div>
</template>

<script>
// components
import DataStatItem from '/src/components/data/DataStatItem'
import CustomChart from '@/components/common/CustomChart/CustomChart.vue'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalSpreadEffectIndex from './components/ModalSpreadEffectIndex.vue'

// utils
import { createDataStatItems, createColumns_hotReportArea, createForm } from './service'
import {
  spreadEffectIndexOptions,
  platformContributeOptions,
  accountContributeOptions,
  spreadTrendOptions,
  hotReportAreaOptions,
} from './options'

// mixins
import mixin from './mixin'
export default {
  name: 'ThemeEffectAssess',

  components: { DataStatItem, CustomChart, CommonTablePage, ModalSpreadEffectIndex },

  mixins: [mixin],

  data() {
    return {
      manuInfo: {},

      visible: {
        spreadEffectIndex: false,
      },

      entryDataCountStat: createDataStatItems(), // 池内数据总量统计

      allPlatformDataCountStat: createDataStatItems(), // 全平台数据总量统计

      spreadEffectIndex_form: createForm(), // 主题传播效果指数

      spreadTrend_form: createForm(), // 传播趋势

      platformContribute_form: createForm(), // 平台贡献率

      accountContribute_form: createForm(), // 账号贡献率

      show: {
        spreadEffectIndex: true,
        platformContribute: true,
        accountContribute: true,
        spreadTrend: true,
        hotReportArea: true,
      },

      hotReportArea_form: createForm(),
      hotReportArea: {
        /*  data: [
          { name: '山西省', value: 40 },
          { name: '北京市', value: 60 },
        ], */
        allData: [],
        columns: createColumns_hotReportArea(this),
        page: {
          total: 0,
          pageNo: 1,
          pageSize: 15,
        },
        totalCount: 0,
        tableData: [],
      },
    }
  },

  computed: {
    id() {
      return this.$route.query.id
    },
  },

  methods: {
    setFormTimeValue(date, form) {
      this[form].startTime = date[0]
      this[form].endTime = date[1]
    },

    /* 主题传播效果指数 */
    spreadEffectIndex_chart(options) {
      this.$refs['spreadEffectIndex'].renderChart(spreadEffectIndexOptions(options), true)
    },
    handleTimeRange_spreadEffectIndex(date) {
      this.setFormTimeValue(date, 'spreadEffectIndex_form')
      this.getThemeSpreadEffect(this.id, this['spreadEffectIndex_form'])
    },
    handleTimeTypeChange_spreadEffectIndex(v) {
      if (v === '自定义') {
      } else {
        this.setFormTimeValue(['', ''], 'spreadEffectIndex_form')
        this.getThemeSpreadEffect(this.id, this['spreadEffectIndex_form'])
      }
    },

    /* 平台贡献率top5 */
    platformContribute_chart(options) {
      this.$refs['platformContribute'].renderChart(platformContributeOptions(options), true)
    },
    handleTimeRange_platformContribute(date) {
      this.setFormTimeValue(date, 'platformContribute_form')
      this.getThemeSite_top(this.id, this['platformContribute_form'])
    },
    handleTimeTypeChange_platformContribute(v) {
      if (v === '自定义') {
      } else {
        this.setFormTimeValue(['', ''], 'platformContribute_form')
        this.getThemeSite_top(this.id, this['platformContribute_form'])
      }
    },

    /* 账号贡献率top5 */
    accountContribute_chart(options) {
      this.$refs['accountContribute'].renderChart(accountContributeOptions(options), true)
    },
    handleTimeRange_accountContribute(date) {
      this.setFormTimeValue(date, 'accountContribute_form')
      this.getThemeAccount_top(this.id, this['accountContribute_form'])
    },
    handleTimeTypeChange_accountContribute(v) {
      if (v === '自定义') {
      } else {
        this.setFormTimeValue(['', ''], 'accountContribute_form')
        this.getThemeAccount_top(this.id, this['accountContribute_form'])
      }
    },

    /* 传播趋势 */
    spreadTrend_chart(options) {
      this.$refs['spreadTrend'].renderChart(spreadTrendOptions(options), true)
    },
    handleTimeRange_spreadTrend(date) {
      this.setFormTimeValue(date, 'spreadTrend_form')
      this.getThemeSpreadTrend(this.id, this['spreadTrend_form'])
    },
    handleTimeTypeChange_spreadTrend(v) {
      if (v === '自定义') {
      } else {
        this.setFormTimeValue(['', ''], 'spreadTrend_form')
        this.getThemeSpreadTrend(this.id, this['spreadTrend_form'])
      }
    },

    /* 热点报道地域分布  */
    hotReportArea_chart(options) {
      this.$refs['hotReportArea'].renderChart(hotReportAreaOptions(options), true)
    },
    handleTimeRange_hotReportArea(date) {
      this.setFormTimeValue(date, 'hotReportArea_form')
      this.getThemeHotReportArea(this.id, this['hotReportArea_form'])
    },
    handleTimeTypeChange_hotReportArea(v) {
      if (v === '自定义') {
      } else {
        this.setFormTimeValue(['', ''], 'hotReportArea_form')
        this.getThemeHotReportArea(this.id, this['hotReportArea_form'])
      }
    },
    handlePageChange_hotReport(page) {
      this.hotReportArea.page.pageNo = page
      this.hotReportArea_setTableData()
    },
    handlePageSizeChange_hotReport(pageSize) {
      this.hotReportArea.page.pageSize = pageSize
      this.hotReportArea_setTableData()
    },
    hotReportArea_setTableData() {
      const index = this.hotReportArea.page.pageNo
      const pageSize = this.hotReportArea.page.pageSize
      const startPos = (index - 1) * pageSize
      this.hotReportArea.tableData = this.hotReportArea.allData.slice(startPos, startPos + pageSize)
    },
  },

  mounted() {
    this.getThemeInfo(this.id)
    this.getThemeStatistics(this.id)
    this.getThemeSpreadEffect(this.id, this['spreadEffectIndex_form'])
    this.getThemeSite_top(this.id, this['platformContribute'])
    this.getThemeAccount_top(this.id, this['accountContribute_form'])
    this.getThemeSpreadTrend(this.id, this['spreadTrend_form'])
    this.getThemeHotReportArea(this.id, this['hotReportArea_form'])

    /* this.spreadEffectIndex_chart({
      xData: ['2024-7-20', '2024-7-21', '2024-7-22', '2024-7-23'],
      allPlatformData: [820, 932, 901, 934, 1290, 1330, 1320],
      entryData: [20, 32, 90, 94, 129, 133, 132],
    }) */

    /*  this.platformContribute_chart({
      data: [
        { value: 1048, name: '今日头条' },
        { value: 735, name: '新京报' },
      ],
    }) */

    /*  this.accountContribute_chart({
      data: [
        { value: 1048, name: '今日头条' },
        { value: 735, name: '新京报' },
      ],
    }) */

    /* this.spreadTrend_chart({
      xData: ['2024-7-20', '2024-7-21', '2024-7-22', '2024-7-23'],
      reshipData: [820, 932, 901, 934, 1290, 1330, 1320],
      readData: [20, 32, 90, 94, 129, 133, 132],
    }) */

    /* this.hotReportArea_chart({
      data: this.hotReportArea.data,
    }) */
  },
}
</script>

<style lang="less" scoped>
.tea-border {
  border: 1px solid #dcdcdc;
}

.tea-desc {
  padding: 0 0 20px;
  border-radius: 2px;
}
h2.list-caption {
  width: 80%;
  margin: 12px auto 0;
}
.manu-info {
  height: 22px;
  line-height: 22px;
  color: var(--app-text-2);

  span + span {
    margin-left: 150px;
  }
}

.tea-content {
  border-radius: 2px;
  padding: 10px 20px 0 18px;
}

.data-stat-wrapper {
  width: 49.5%;
  flex-shrink: 0;

  &:first-of-type {
    margin-right: 1%;
  }
}
.chart-box {
  height: 340px;
}

.right-oper {
  position: absolute;
  top: -6px;
  right: 0;
}

/* .chart-box--report {
  /deep/ .pagination-container {
    bottom: -64px;
  }
} */
</style>
